<!DOCTYPE html>
<html>
    <head>
        <!-- 页面meta -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
        <!-- 引入样式 -->
        <link rel="stylesheet" href="../plugins/elementui/index.css">
        <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
        <link rel="stylesheet" href="../css/style.css">
        <link rel="stylesheet" href="../css/orderset.css">
        <!-- 引入组件库 -->
        <script src="../js/vue.js"></script>
        <script src="../plugins/elementui/index.js"></script>
        <script type="text/javascript" src="../js/jquery.min.js"></script>
        <script src="../js/axios-0.18.0.js"></script>
    </head>
    <body class="hold-transition">
    <div id="app">
        <div class="content-header">
            <h1>商铺管理<small>分类详情</small></h1>
            <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>商铺管理</el-breadcrumb-item>
                <el-breadcrumb-item>分类详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="app-container">
            <div class="box" >
                <div >
                    <el-form :inline="true" :model="searchCategory" class="demo-form-inline">
                        <el-form-item label="分类描述">
                            <el-input v-model="searchCategory.description" placeholder="分类描述"></el-input>
                        </el-form-item>
                        <el-form-item label="创建时间">
                            <el-date-picker
                                    value-format="yyyy-MM-dd"
                                    v-model="searchCategory.createDateStart"
                                    type="date"
                                    placeholder="选择日期">
                            </el-date-picker>
                            至
                            <el-date-picker
                                    v-model="searchCategory.createDateEnd"
                                    type="date"
                                    placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item lable="分类下数量">
                            <el-input v-model="searchCategory.goodsCount" placeholder="请输入数量"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button  icon="el-icon-search" @click="search">查询</el-button>
                        </el-form-item>
                        <el-button type="primary" icon="el-icon-circle-plus" @click="showNewForm">新建</el-button>
                        <el-button type="danger" icon="el-icon-delete" @click="deleteByIds">删除</el-button>
                    </el-form>


                    <!--新建弹出框-->
                    <el-dialog :title="newCategory.id == undefined ? '新建分类':'修改分类'" :visible.sync="dialogFormVisible">
                        <el-form :model="newCategory">
                            <el-form-item label="分类名称" :label-width="formLabelWidth">
                                <el-input v-model="newCategory.name" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="分类描述" :label-width="formLabelWidth">
                                <el-input v-model="newCategory.description" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="分类位置" :label-width="formLabelWidth">
                                <el-select v-model="newCategory.level" placeholder="请选择排在那个分类后面">
                                    <el-option  label="放在最前面" :value="0"></el-option>
                                    <el-option v-for="item in tableData" :label="item.name" :value="item.level"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible = false">取 消</el-button>
                            <el-button type="primary" @click="save">确 定</el-button>
                        </div>
                    </el-dialog>









                    <template >
                        <el-table
                                ref="multipleTable"
                                :data="tableData"
                                tooltip-effect="dark"
                                style="width: 100%"
                                @selection-change="handleSelectionChange">
                            <el-table-column
                                    type="selection"
                                    width="55">
                            </el-table-column>
                            <el-table-column
                                    label="序号"
                                    type="index">
                            </el-table-column>
                            <el-table-column
                                    prop="name"
                                    label="分类名称"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    prop="description"
                                    label="分类描述"
                                    width="500">
                            </el-table-column>
                            <el-table-column
                                    prop="createDate"
                                    label="创建时间"
                                    width="150">
                            </el-table-column>
                            <el-table-column
                                    prop="updateDate"
                                    label="更新时间"
                                    width="150">
                            </el-table-column>
                            <el-table-column
                                    prop="enabledValue"
                                    label="启用"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    label="操作"
                                    width="120">
                                <template slot-scope="scope">
                                    <el-button type="primary" icon="el-icon-edit" circle @click="updateCategory(scope.row)" type="text" size="small"></el-button>
                                    <el-button type="text" size="small" >编辑</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </div>
            </div>
        </div>

       {{ids}}

    </div>
    </body>
    <!-- 引入组件库 -->
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script>
        new Vue({
            el: '#app',

            data:{
                dialogFormVisible:false,
                ids:[],//删除的id集合
                multipleSelection:[],
                searchCategory:{description:"",createDateStart:"",createDateEnd:"",goodsCount:""},
                tableData: [{
                    id:"1",
                    level: '1',
                    name: '甜点',
                    description: '饭后吃甜点美滋滋，一口爽一天',
                    createDate: '2019-11-11',
                    updateDate: '2019-12-12',
                    enabled: '1',
                    enabledValue:"是"
                }, {
                    level: '2',
                    name: '甜点',
                    description: '饭后吃甜点美滋滋，一口爽一天',
                    createDate: '2019-11-11',
                    updateDate: '2019-12-12',
                    enabledValue:"是"
                }, {
                    level: '3',
                    name: '甜点',
                    description: '饭后吃甜点美滋滋，一口爽一天',
                    createDate: '2019-11-11',
                    updateDate: '2019-12-12',
                    enabledValue:"是"
                }, {
                    level: '4',
                    name: '甜点',
                    description: '饭后吃甜点美滋滋，一口爽一天',
                    createDate: '2019-11-11',
                    updateDate: '2019-12-12',
                    enabledValue:"是"
                }],
                newCategory: {
                },
                formLabelWidth: '120px'

            },
            created: function () {//在vue初始化时调用
                this.findAll()
            },
            methods:{

                search(){

                    axios.post("/category/search",this.searchCategory).then(
                        res=>{
                            if (res.data.flag == true){
                                this.$message.success(res.data.message)
                                this.tableData = res.data.data;
                            } else {
                                this.$message.error(res.data.message)
                            }


                        }
                    )


                },


                updateCategory(category){
                    var stringify = JSON.stringify(category);
                    this.newCategory = JSON.parse(stringify);
                    alert(this.newCategory.id)
                    this.dialogFormVisible = true;
                },


                showNewForm(){
                    this.newCategory ={level:0};
                    this.dialogFormVisible = true;
                },

               open() {
                    this.$confirm('此操作将永久删除这些分类, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                        center: true
                    }).then(() => {

                        axios.post("/category/delete",this.ids).then(
                            res=>{
                                if (res.data.flag == true){
                                    this.findAll()
                                }
                                this.$message.success(res.data.message)
                            }
                        )


                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                },

                //删除
                deleteByIds(){
                    if (this.ids.length == 0){
                        this.$message.error("请至少选择一项")
                        return;
                    }

                    this.open();


                },








                handleSelectionChange(val) {
                    this.ids = [];

                    for (let i = 0; i < val.length; i++) {
                        this.ids.push(val[i].id);
                    }

                },

                //获取优先级

                getLevel() {
                     axios.get("/category/getLevel").then(res=>{

                         if (res.data.flag == true){
                             this.levelCount = res.data.data + 1;
                         }

                     });


                },

                //保存
                save(){



                    if (this.newCategory.id != undefined){

                        axios.post("/category/update",this.newCategory).then(

                            res=>{
                                this.dialogFormVisible = false;
                                if (res.data.flag == true){
                                    this.$message.success(res.data.message);
                                    this.findAll();
                                } else {
                                    this.$message.error(res.data.message);
                                }

                            }
                        )


                    }else {
                        axios.post("/category/save",this.newCategory).then(res=>{
                            this.dialogFormVisible = false;
                            if (res.data.flag == true){
                                this.$message.success(res.data.message);
                                this.findAll();
                            } else {
                                this.$message.error(res.data.message);
                            }

                        })
                    }





                },




                findAll(){
                    axios.get("/category").then(
                        res=>{
                            if (res.data.flag == true){
                                this.tableData = res.data.data;
                            }else{
                                this.$message.error(res.data.message);
                            }
                        }
                    )

                }



            }
        })
    </script>
</html>